<template>
  <div>
    <!--头部区域 -->
    <city-header></city-header>
    <!--搜索区域 -->
    <city-search :cities="cities"></city-search>
    <!--列表区域 -->
    <city-list  :hotCities="hotCities" :cities="cities"></city-list>
    <!--透明字母表区域 -->
    <city-alphabet :cities="cities"></city-alphabet>
  </div>
</template>

<script>
import CityHeader from './CityHeader'
import CitySearch from './CitySearch'
import CityList from './CityList'
import CityAlphabet from './CityAlphabet'

export default {
  data: function () {
    return {
      // 热门城市数组
      hotCities: [],
      // 城市列表对象
      cities: {}
      // letter: ''
    }
  },
  methods: {
    // 获取城市列表数据
    getCityList: async function () {
      var { data: res } = await this.$http.get('/api/city.json')
      if (res.ret && res.data) {
        this.hotCities = res.data.hotCities
        this.cities = res.data.cities
      }
    }
  },
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  mounted () {
    // 获取城市列表数据
    this.getCityList()
  }
}
</script>

<style scoped>

</style>
